<template>
  <div class="z-empty h-full flex flex-col items-center justify-center flex-1">
    <div class="z-empty__image"
         :style="imageStyle">
      <img v-if="image"
           :src="image"
           ondragstart="return false">
      <slot v-else
            name="image">
        <img-empty />
      </slot>
    </div>
    <div class="z-empty__description">
      <slot name="description">
        <p>{{ emptyDescription }}</p>
      </slot>

    </div>
    <div v-if="$slots.default"
         class="z-empty__bottom">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ImgEmpty from './img-empty.vue'
import { t } from 'element-ui/src/locale'

export default {
  name: 'ZEmpty',
  components: {
    [ImgEmpty.name]: ImgEmpty
  },
  props: {
    image: {
      type: String,
      default: ''
    },
    imageSize: { type: Number, default: 160 },
    description: {
      type: String,
      default: ''
    }
  },
  computed: {
    emptyDescription () {
      return this.description || t('el.empty.description')
    },
    imageStyle () {
      return {
        width: this.imageSize ? `${this.imageSize}px` : ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.z-empty {
  &__image {
    img {
      width: 100%;
      height: 100%;
    }
    svg {
      fill: #dcdde0;
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }
}
</style>
